frontend/app/element/streamdown.tsx (2)

181-198: Consider adding ARIA attributes for better accessibility.

The Collapsible button should include aria-expanded to communicate its state to assistive technologies. Additionally, consider adding aria-controls to link the button to the content region.

Apply this diff to improve accessibility:

+    const contentId = `collapsible-${title.toString().replace(/\s+/g, '-').toLowerCase()}`;
+
     return (
         <div className="my-3">
             <button
                 className="flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0 font-medium text-secondary hover:text-primary"
                 onClick={() => setIsOpen(!isOpen)}
+                aria-expanded={isOpen}
+                aria-controls={contentId}
             >
                 <span className="text-[0.65rem] text-primary transition-transform duration-200 inline-block w-3">
                     {isOpen ? "\u25BC" : "\u25B6"} {/* ▼ ▶ */}
                 </span>
                 <span>{title}</span>
             </button>
-            {isOpen && <div className="mt-2 ml-1 pl-3.5 border-l-2 border-border text-secondary">{children}</div>}
+            {isOpen && <div id={contentId} className="mt-2 ml-1 pl-3.5 border-l-2 border-border text-secondary">{children}</div>}
         </div>
     );

---

278-292: Consider defensive checks for robustness.

The summary extraction logic assumes a specific node structure from the markdown parser (c?.props?.node?.tagName). While this likely works consistently with the streamdown library, consider adding a type guard or more defensive extraction to handle edge cases where the parser output might differ.

Optional: Add a helper function to safely extract the summary:

const extractSummary = (children: React.ReactNode) => {
    const childArray = Array.isArray(children) ? children : [children];
    const summary = childArray.find((c) => 
        c && typeof c === 'object' && 'props' in c && 
        c.props?.node?.tagName === "summary"
    );
    return summary?.props?.children || "Details";
};

pkg/wcore/workspace.go (1)

222-222: Update comment to reflect OnboardingModal.

The comment references "TOS modal dismissal" but the PR replaces the TOS modal with OnboardingModal. Update the comment for accuracy.

Apply this diff to update the comment:

-	// No need to apply an initial layout for the initial launch, since the starter layout will get applied after TOS modal dismissal
+	// No need to apply an initial layout for the initial launch, since the starter layout will get applied after OnboardingModal dismissal

frontend/app/onboarding/onboarding-layout.tsx (3)

38-41: Avoid reusing a static CodeEditor blockId across instances

All FakeBlocks share blockId="fake-block". This can collide editor overrides/state and cause cross‑talk. Use a per‑instance id.

Apply this diff:

-                        <CodeEditor blockId="fake-block" text={editorText} readonly={true} language="shell" />
+                        <CodeEditor blockId={localBlockId} text={editorText} readonly={true} language="shell" />

Add inside FakeBlock (near the component start):

const localBlockId = useRef(`fake-block-${crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`).current;

---

64-75: Recompute measured rect on resize/relayout

blockRect is captured only once. Resizes or container layout changes will desync the overlay. Observe size/position changes.

You can attach a ResizeObserver to highlightedContainerRef and layoutRef to update setBlockRect on size changes. Example:

useLayoutEffect(() => {
  const elem = highlightedContainerRef.current;
  if (!elem) return;
  const ro = new ResizeObserver(() => {
    setBlockRect({
      left: elem.offsetLeft,
      top: elem.offsetTop,
      width: elem.offsetWidth,
      height: elem.offsetHeight,
    });
  });
  ro.observe(elem);
  return () => ro.disconnect();
}, []);

---

150-161: Don’t intercept pointer events when collapsed

The animated FakeBlock can still capture clicks when not expanded. Disable pointer events in the collapsed state.

Apply this diff:

-                    <div className="absolute transition-all duration-200 ease-in-out" style={getAnimatedStyle()}>
+                    <div
+                        className={cn("absolute transition-all duration-200 ease-in-out", !isExpanded && "pointer-events-none")}
+                        style={getAnimatedStyle()}
+                    >

frontend/app/element/quicktips.tsx (1)

289-297: Harden external links: add noreferrer

For target="_blank" links, include rel="noopener noreferrer" to prevent referrer leakage and strengthen security.

Apply this diff:

-                        <a
-                            target="_blank"
-                            href="https://discord.gg/XfvZ334gwU"
-                            rel="noopener"
+                        <a
+                            target="_blank"
+                            href="https://discord.gg/XfvZ334gwU"
+                            rel="noopener noreferrer"
@@
-                        <a
-                            target="_blank"
-                            href="https://docs.waveterm.dev/config"
-                            rel="noopener"
+                        <a
+                            target="_blank"
+                            href="https://docs.waveterm.dev/config"
+                            rel="noopener noreferrer"
@@
-                        <a
-                            target="_blank"
-                            href="https://docs.waveterm.dev/keybindings"
-                            rel="noopener"
+                        <a
+                            target="_blank"
+                            href="https://docs.waveterm.dev/keybindings"
+                            rel="noopener noreferrer"
@@
-                        <a
-                            target="_blank"
-                            href="https://docs.waveterm.dev"
-                            rel="noopener"
+                        <a
+                            target="_blank"
+                            href="https://docs.waveterm.dev"
+                            rel="noopener noreferrer"

Also applies to: 302-310, 315-323, 328-336

frontend/app/onboarding/onboarding-command.tsx (1)

24-48: Use useEffect for timers and stop cursor when typing completes

Timers don’t need layout sync; also stop the cursor blinker after completion and avoid starting it when hidden.

Apply this diff:

-    useLayoutEffect(() => {
+    useEffect(() => {
         let charIndex = 0;
-        const typeInterval = setInterval(() => {
+        const typeInterval = window.setInterval(() => {
             if (charIndex < command.length) {
                 setDisplayedText(command.slice(0, charIndex + 1));
                 charIndex++;
             } else {
-                clearInterval(typeInterval);
+                window.clearInterval(typeInterval);
                 setIsComplete(true);
-                setShowCursor(false);
+                setShowCursor(false);
                 if (onComplete) {
                     onComplete();
                 }
+                // stop cursor blink after completion
+                if (cursorIntervalId) {
+                    window.clearInterval(cursorIntervalId);
+                }
             }
-        }, typeIntervalMs);
+        }, typeIntervalMs);
 
-        const cursorInterval = setInterval(() => {
-            setShowCursor((prev) => !prev);
-        }, 500);
+        const cursorIntervalId = showCursorProp
+            ? window.setInterval(() => {
+                  setShowCursor((prev) => !prev);
+              }, 500)
+            : undefined;
 
         return () => {
-            clearInterval(typeInterval);
-            clearInterval(cursorInterval);
+            window.clearInterval(typeInterval);
+            if (cursorIntervalId) window.clearInterval(cursorIntervalId);
         };
-    }, [command, typeIntervalMs, onComplete]);
+    }, [command, typeIntervalMs, onComplete, showCursorProp]);

frontend/app/modals/modalsrenderer.tsx (1)

23-24: Use a fallback key for OnboardingModal

displayName may be undefined; provide a stable fallback to avoid React key warnings.

Apply this diff:

-        rtn.push(<OnboardingModal key={OnboardingModal.displayName} />);
+        rtn.push(<OnboardingModal key={OnboardingModal.displayName || "OnboardingModal"} />);

frontend/app/onboarding/onboarding-features.tsx (1)

206-297: Consider simplifying command cycling.

The command cycling logic works correctly but updates both commandIndex and key state (Lines 232-233). Since commandIndex changes already force a re-render and the render function at Line 291 uses commandIndex directly, the separate key state update may be unnecessary.

If you find the separate key tracking redundant, consider this simplification:

-    const [key, setKey] = useState(0);

     const handleCommandComplete = () => {
         setTimeout(() => {
             setCommandIndex((prev) => (prev + 1) % commands.length);
-            setKey((prev) => prev + 1);
         }, 2500);
     };

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro